<template>
	<view class="container-bottom-btns">
		<view class="form">
			<view class="form-column-item">
				<view class="label">标题</view>
				<view class="content">
					<input type="text" placeholder="请输入标题" v-model="form.demandTitle">
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">施工地点</view>
				<view class="picker-content" @tap="$refs.region.open()">
					<view :class="{'placeholder-picker': !regionStr, 'picker-text': regionStr}">
						{{regionStr ? regionStr : '请选择省市区'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">详细地址</view>
				<view class="content">
					<input type="text" placeholder="请输入详细地址" v-model="form.address">
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">需求类型</view>
				<view class="picker-content" @tap="$refs.demandType.open()">
					<view :class="{'placeholder-picker': !form.demandType, 'picker-text': form.demandType}">
						{{form.demandType ? demandTypeStr : '请选择需求类型'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">类别</view>
				<view class="picker-content" @tap="$refs.productType.open()">
					<view :class="{'placeholder-picker': !form.productType, 'picker-text': form.productType}">
						{{form.productType ? productTypeStr : '请选择类别'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">详细介绍</view>
				<view class="content">
					<textarea placeholder="请输入详细介绍" maxlength="-1" v-model="form.intro"></textarea>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">工期进度</view>
				<view class="content">
					<input type="text" placeholder="请输入工期进度" v-model="form.schedule">
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">进场时间</view>
				<view class="picker-content" @tap="showEntryTime = true">
					<view :class="{'placeholder-picker': !form.entryTime, 'picker-text': form.entryTime}">
						{{form.entryTime ? form.entryTime : '请选择进场时间'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">付款方式</view>
				<view class="picker-content" @tap="$refs.payType.open()">
					<view :class="{'placeholder-picker': !form.paymentWay, 'picker-text': form.paymentWay}">
						{{form.paymentWay ? payTypeStr : '请选择付款方式'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">发票</view>
				<view class="picker-content" @tap="$refs.invoiceType.open()">
					<view :class="{'placeholder-picker': !form.invoiceWay, 'picker-text': form.invoiceWay}">
						{{form.invoiceWay ? invoiceTypeStr : '请选择发票'}}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">联系人</view>
				<view class="content">
					<input type="text" placeholder="请输入联系人" v-model="form.contactName"/>
				</view>
			</view>
			<view class="form-column-item">
				<view class="label">联系方式</view>
				<view class="content">
					<input type="tel" maxlength="11" placeholder="请输入联系方式" v-model="form.contactPhone"/>
				</view>
			</view>
		</view>
		
		<view class="bottom-btn-wrapper">
			<SubmitBtn text="立即发布" @click="submit"></SubmitBtn>
		</view>



		<OnePicker ref="demandType" keyName="label" :columns="[demandTypeArr]" @pickerConfirm="demandTypeConfirm" :defaultIndex="demandTypeIndex"></OnePicker>
		<OnePicker ref="productType" keyName="label" :columns="[productTypeArr]" @pickerConfirm="productTypeConfirm"  :defaultIndex="productTypeIndex"></OnePicker>
		<u-datetime-picker ref="entryTime" v-model="entryTime"  :show="showEntryTime"  mode="date" confirmColor="#FE5A13" @confirm="entryTimeConfirm" @cancel="showEntryTime = false"></u-datetime-picker>
		<OnePicker ref="payType" keyName="label" :columns="[payTypeArr]" @pickerConfirm="payTypeConfirm" :defaultIndex="payTypeIndex"></OnePicker>
		<OnePicker ref="invoiceType" keyName="label" :columns="[invoiceTypeArr]" @pickerConfirm="invoiceTypeConfirm" :defaultIndex="invoiceTypeIndex"></OnePicker>
		<RegionPicker ref="region" @regionConfirm="regionConfirm" 
			:provinceId="form.provinceId" :cityId="form.cityId" :areaId="form.areaId"></RegionPicker>
	</view>
</template>

<script>
	import {
		demandType,
		productType,
		payType,
		invoiceType,
		const2Arr
	} from '@/consts'
	import validate  from '@/utils/validate'
	import { addDemand, editDemand, getDemand  } from '@/api/demand.js'
import { toast } from '../../utils/uni-api'
	export default {
		data() {
			return {
				demandType,
				productType,
				payType,
				invoiceType,
				demandTypeArr: const2Arr(demandType),
				productTypeArr: const2Arr(productType),
				payTypeArr: const2Arr(payType),
				invoiceTypeArr: const2Arr(invoiceType),
				showRegionPicker: false,
				showEntryTime: false,
				
				form: {
					id: '',
					demandTitle: '',
					provinceId: '',
					province: '',
					cityId: '',
					city: '',
					areaId: '',
					area: '',
					address: '',
					demandType: '',
					productType: '',
					intro: '',
					schedule: '',
					entryTime: '',
					paymentWay: '',
					invoiceWay: '',
					contactName: '',
					contactPhone: ''
				},
				demandTypeIndex: [0],
				productTypeIndex: [0],
				payTypeIndex: [0],
				invoiceTypeIndex: [0],
				entryTime: new Date()
			}
		},
		onLoad(option){
			this.form.id = option.id || '';
			// 查询需求详情
			if(option.id){
				this.getDemand()
			}
		},
		computed: {
			demandTypeStr() {
				return this.form.demandType ? this.demandTypeArr.find(item => item.value === this.form.demandType).label : ''
			},
			productTypeStr() {
				return this.form.productType ? this.productTypeArr.find(item => item.value === this.form.productType).label : ''
			},
			payTypeStr(){
				return this.form.paymentWay ? this.payTypeArr.find(item => item.value === this.form.paymentWay).label : ''
			},
			invoiceTypeStr(){
				return this.form.invoiceWay ? this.invoiceTypeArr.find(item => item.value === this.form.invoiceWay).label : ''
			},
			regionStr(){
				return this.form.provinceId ? `${this.form.province},${this.form.city},${this.form.area}` : ''
			}
		},
		methods: {
			getDemand(){
				getDemand({id: this.form.id}).then(res => {
					this.form = res.result
					this.demandTypeIndex = [this.demandTypeArr.findIndex(item => item.value === this.form.demandType)]
					this.productTypeIndex = [this.productTypeArr.findIndex(item => item.value === this.form.productType)]
					this.payTypeIndex = [this.payTypeArr.findIndex(item => item.value === this.form.paymentWay)]
					this.invoiceTypeIndex = [this.invoiceTypeArr.findIndex(item => item.value === this.form.invoiceWay)]
					this.entryTime = new Date(this.form.entryTime)
				})
			},
			regionConfirm(e){
				this.form.provinceId = e.value[0].value
				this.form.cityId = e.value[1].value
				this.form.areaId = e.value[2].value
				this.form.province = e.value[0].label
				this.form.city = e.value[1].label
				this.form.area = e.value[2].label
			},
			demandTypeConfirm(e) {
				this.form.demandType = e.value.value
				
			},
			productTypeConfirm(e) {
				this.form.productType = e.value.value
			},
			entryTimeConfirm(e){
				this.form.entryTime = this.$moment(e.value).format('YYYY-MM-DD')
				this.showEntryTime = false
			},
			payTypeConfirm(e){
				this.form.paymentWay = e.value.value
			},
			invoiceTypeConfirm(e){
				this.form.invoiceWay = e.value.value
			},
			submit(){
				if(!validate.isNotEmpty(this.form.demandTitle, '标题')) return 
				if(!validate.isNotEmpty(this.form.provinceId, '施工地点')) return 
				if(!validate.isNotEmpty(this.form.address, '详细地址')) return 
				if(!validate.isNotEmpty(this.form.demandType, '需求类型')) return 
				if(!validate.isNotEmpty(this.form.productType, '类别')) return 
				if(!validate.isNotEmpty(this.form.intro, '详细介绍')) return 
				if(!validate.isNotEmpty(this.form.schedule, '工期进度')) return 
				if(!validate.isNotEmpty(this.form.entryTime, '进场时间')) return 
				if(!validate.isNotEmpty(this.form.paymentWay, '付款方式')) return 
				if(!validate.isNotEmpty(this.form.invoiceWay, '发票')) return 
				if(!validate.isNotEmpty(this.form.contactName, '联系人')) return 
				if(!validate.isNotEmpty(this.form.contactPhone, '联系电话')) return 
				if(!validate.isPhone(this.form.contactPhone, '联系电话')) return 
				if(this.form.id){
					editDemand(this.form).then(res => {
						toast(res.message, true)
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					})
				}else{
					addDemand(this.form).then(res => {
						toast(res.message, true)
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					})
				}
			}
		}
	}
</script>

<style>

</style>